import { FC, useEffect, useState } from 'react';
import { Typography, Spin } from 'antd';
import { useRequest } from 'ahooks';
import { getComponentStatService } from '../../../../../services/stat';
import { useParams } from 'react-router-dom';
import { getComponentConfigByType } from '../../../../../components/QuestionComponents';

const { Title } = Typography;
export type PropsType = {
  selectedComponentId: string;
  selectedComponentType: string;
};
const RightPanel: FC<PropsType> = (props: PropsType) => {
  const { selectedComponentId, selectedComponentType } = props;
  const { id } = useParams();
  const [stat, setStat] = useState([]);
  const { loading, run: loadStatData } = useRequest(
    async (questionId, componentId) => {
      return await getComponentStatService(questionId, componentId);
    },
    {
      manual: true,
      onSuccess: (res: any) => {
        console.log('res.stat', res.stat);
        setStat(res.stat);
      },
    },
  );
  useEffect(() => {
    if (!id || !selectedComponentId) return;
    loadStatData(id, selectedComponentId);
  }, [id, selectedComponentId]);

  function genStatElement() {
    if (!selectedComponentId) return <div>未选中组件</div>;
    if (loading)
      return (
        <div style={{ textAlign: 'center', marginTop: '60px' }}>
          <Spin />
        </div>
      );
    const { StatComponent } = getComponentConfigByType(selectedComponentType) || {};
    console.log('StatComponent', StatComponent);
    if (StatComponent == null) {
      console.log('该组件无统计图表');
      return <div>该组件无统计图表</div>;
    }
    return <StatComponent stat={stat} />;
  }
  return (
    <>
      <Title level={5}>图标统计</Title>
      <div>{genStatElement()}</div>
    </>
  );
};
export default RightPanel;
